import { useMemo } from "react";

type SvgIconProps = {
  size?: string | number;
  color?: string;
  prefix?: string;
  name: string;
};

/**
 * @Svg组件
 * @props  color   图标颜色
 * @props  name 图标名称--文件名称
 * @props  size  图标大小
 * @props  prefix 前缀 默认icon
 */

export default function SvgIcon({
  color,
  name,
  size = 16,
  prefix = "icon",
}: SvgIconProps) {
  size = size ?? "36px"
  color = color ?? ""
  prefix = prefix ?? "icon"
  const symbolId = useMemo(() => `#${prefix}-${name}`, [prefix, name]);
  return (
    <svg className="fill-current" aria-hidden="true" width={size} height={size} fill={color}>
      <use href={symbolId} fill={color} />
    </svg>
  );
}
